<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>撰写新文章 - UnaBoot</title>
    <link rel="icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/adminlte.css">
    <#if editor == "0">
        <link rel="stylesheet" href="${una}/ub-admin/plugin/editormd/css/editormd.css">
    <#else>
        <link rel="stylesheet" href="${una}/ub-admin/plugin/ckeditor5/css/styles.css">
    </#if>
    <link rel="stylesheet" href="${una}/ub-admin/css/unaboot-admin.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/bootstrap-tagsinput/bootstrap-tagsinput.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/layer/skin/default/layer.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
    <style>
        .bootstrap-tagsinput .tag{
            background-color: #007bff;
            padding: 1px 3px;
            border-radius: 2px;

        }
    </style>
</head>
<body style="height: 100vh;">
    <form id="post-form">
        <div class="container-fluid new-post">
            <div class="row">
                <div class="col-12 header">
                    <div class="logo-menu pull-left">
                        <a href="${una}/admin/posts/"><img src="${una}/ub-admin/img/logo-gray.svg" class="img-fluid"></a>
                    </div>
                    <div class="post-title">
                        <input class="form-control input-sm" name="title" autocomplete="off" placeholder="请在此处输入文章标题">
                    </div>
                    <div class="actions pull-right">
                        <button class="btn btn-sm btn-primary" data-widget="control-sidebar" data-slide="true"><i class="fa fa-cogs"></i> 参数配置</button>
                    </div>
                </div>
            </div>
            <div class="row mt-1">
                <div class="col-12">
                    <#if editor == "0">
                        <div id="markdown-editor-wrapper" style="width: 100%">
                            <div class="editormd current" id="content-markdown">
                                <textarea class="editormd-markdown-textarea" name="markdown"></textarea>
                                <textarea class="editormd-html-textarea" name="content" id="content"></textarea>
                            </div>
                        </div>
                    <#else>
                        <div id="ck-editor-wrapper" class="current">
                            <main>
                                <div class="centered">
                                    <div class="row">
                                        <div class="document-editor__toolbar"></div>
                                    </div>
                                    <div class="row row-editor">
                                        <div class="mark-line-left"></div>
                                        <div class="mark-line-right"></div>
                                        <div class="editor">
                                        </div>
                                        <textarea style="display: none;" id="content" name="content"></textarea>
                                    </div>
                                </div>
                            </main>
                        </div>
                    </#if>
                </div>
            </div>
        </div>
        <aside class="control-sidebar control-sidebar-light sidebar-wrapper">
            <div class="control-sidebar-content">
                <div class="card m-0 text-sm" id="setting-aside-card">
                    <div class="card-header">
                        <h4 class="card-title">参数配置</h4>
                        <a href="javascript:void(0);" class="text-danger pull-right" title="关闭" data-widget="control-sidebar" data-slide="true">
                            <i class="fa fa-times-circle-o"></i> 关闭
                        </a>
                    </div>
                    <div class="card-body p-0 scb">
                        <p class="mb-0 p-2 text-dark" style="background: #e8f2ff;">首选项</p>
                        <div class="p-4">
                            <div class="form-group row">
                                <div class="col-12 mt-2">
                                    <img src="${una}/ub-admin/img/thumb.jpg" id="thumb-preview" style="box-shadow: none;border: none;border-radius: 4px;" class="img-thumbnail mb-2">
                                    <input type="hidden" name="thumb" id="thumb">
                                    <div class="btn-group">
                                        <button type="button" id="upload-thumb" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i> 上传</button>
                                        <button type="button" id="undo-thumb" class="btn btn-default btn-sm"><i class="fa fa-undo"></i> 撤销</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="slug" class="col-3 col-form-label font-weight-normal">访问路径:</label>
                                <div class="col-9">
                                    <input type="text" name="slug" value="${slug}" class="form-control" id="slug" placeholder="请输入slug名称" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="channel" class="col-3 col-form-label font-weight-normal">文章分类:</label>
                                <div class="col-9">
                                    <select name="categoryId" class="form-control" id="categoryId">
                                        <option style="display: none">请选择分类</option>
                                        <#if categories?? && categories?size gt 0>
                                            <#list categories as category>
                                                <option value="${category.id}">${category.name}</option>
                                            </#list>
                                        </#if>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-12">
                                    <input type="hidden" name="tagIds" id="tagIds">
                                    <input name="taginput" type="text" class="form-control" id="taginput" placeholder="请输入文章标签">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-12 mt-2">
                                    <textarea class="form-control" name="summary" rows="2" placeholder="请在此输入文章摘要(选填)..."></textarea>
                                </div>
                            </div>
                        </div>
                        <p class="mb-0 p-2 text-dark" style="background: #e8f2ff;">常用选项</p>
                        <div class="p-4">
                            <div class="form-group row">
                                <div class="col-12">
                                    <div class="custom-control custom-radio custom-control-inline pr-4">
                                        <input type="radio" id="style-article" name="style" checked value="0" class="custom-control-input">
                                        <label class="custom-control-label font-weight-normal" for="style-article">文章类型</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="style-document" name="style" value="1" class="custom-control-input">
                                        <label class="custom-control-label font-weight-normal" for="style-document">文档类型</label>
                                    </div>
                                </div>
                                <div class="col-12 mt-2">
                                    <div class="custom-control custom-radio custom-control-inline pr-4">
                                        <input type="radio" id="comment-on" name="comment" value="1" checked class="custom-control-input">
                                        <label class="custom-control-label font-weight-normal" for="comment-on">允许评论</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="comment-off" name="comment" value="0" class="custom-control-input">
                                        <label class="custom-control-label font-weight-normal" for="comment-off">禁止评论</label>
                                    </div>
                                </div>
                                <@shiro.hasRole name="admin">
                                    <div class="col-12 mt-2">
                                        <div class="custom-control custom-checkbox custom-control-inline pr-2">
                                            <input type="checkbox" class="custom-control-input" id="recommend"  name="recommend" value="1">
                                            <label class="custom-control-label font-weight-normal" for="recommend">推荐到首页</label>
                                        </div>
                                        <div class="custom-control custom-checkbox custom-control-inline">
                                            <input type="checkbox" class="custom-control-input" id="stick" name="stick" value="1">
                                            <label class="custom-control-label font-weight-normal" for="stick">置顶为轮播</label>
                                        </div>
                                    </div>
                                </@shiro.hasRole>
                                <@shiro.hasRole name="editor">
                                    <input type="hidden" name="recommend" id="recommend" value="0">
                                    <input type="hidden" name="stick" id="stick" value="0">
                                </@shiro.hasRole>
                            </div>
                        </div>
                        <p class="mb-0 p-2 text-dark" style="background: #e8f2ff;">其他选项</p>
                        <div class="p-4">
                            <div class="col-12 mt-2">
                                <div class="custom-control custom-radio custom-control-inline pr-4">
                                    <input type="radio" id="original-on" name="source" value="0" checked class="custom-control-input">
                                    <label class="custom-control-label font-weight-normal" for="original-on">原创文章</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="original-off" name="source" value="1" class="custom-control-input">
                                    <label class="custom-control-label font-weight-normal" for="original-off">转载文章</label>
                                </div>
                            </div>
                            <div class="form-group row mt-2">
                                <label for="author" class="col-3 col-form-label font-weight-normal">作者:</label>
                                <div class="col-9">
                                    <input type="text" name="author" value="${profile.nickname!(profile.username)}" class="form-control" id="author" placeholder="请在此输入原文作者(选填)" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="original-url" class="col-3 col-form-label font-weight-normal">原文链接:</label>
                                <div class="col-9">
                                    <input type="text" name="url" class="form-control" id="url" placeholder="请在此输入原文链接(选填)" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-12">
                                    <textarea name="keywords" class="form-control" id="keywords" rows="2" placeholder="请在此输入文章关键词(选填)" autocomplete="off"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer scf bg-white border-top text-center">
                        <input type="hidden" name="status" id="status" value="-1">
                        <button type="button" aria-status="-1" class="submit btn btn-sm btn-default pl-4 pr-4 mr-2">草稿</button>
                        <button type="button" aria-status="0" class="submit btn btn-sm btn-primary pl-4 pr-4" >发布</button>
                    </div>
                </div>
            </div>
        </aside>
    </form>
<script src="${una}/ub-admin/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<script src="${una}/ub-admin/plugin/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="${una}/ub-admin/plugin/jquery/jquery.serialize.js"></script>
<script src="${una}/ub-admin/plugin/jquery/jquery.form.js"></script>
<script src="${una}/ub-admin/js/adminlte.js" type="text/javascript"></script>
<#if editor == "0">
    <script src="${una}/ub-admin/plugin/editormd/editormd.js"></script>
<#else>
    <script src="${una}/ub-admin/plugin/ckeditor5/ckeditor.js"></script>
</#if>
<script src="${una}/ub-admin/plugin/typeahead/bootstrap3-typeahead.js" type="text/javascript"></script>
<script src="${una}/ub-admin/plugin/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<script src="${una}/ub-admin/plugin/layer/layer.js" type="text/javascript"></script>
<script src="${una}/ub-admin/js/jquery.validate.min.js"></script>
<script src="${una}/ub-admin/js/unaboot-admin.core.js" type="text/javascript"></script>
<script type="text/javascript">
    var form = $("#post-form");
    form.validate({
        errorPlacement: function errorPlacement(error, element) {
            element.after(error);
        },
        rules:{
            title:{
                required:true,
                minlength:2,
                maxlength: 80
            },
            slug:{
                required:true
            },
            categoryId:{
                required:true
            },
            summary:{
                required:true,
                maxlength:128
            },
            content:{
                required:true
            }
        },
        messages:{
            title:{
                required:'请输入文章标题',
                minlength:'文章标题不得少于两个字符',
                maxlength:'文章标题过长，最大长度为80个字符'
            },
            slug:{
                required:"文章自定义访问路径不能为空"
            },
            categoryId:{
                required:'请选择文章所属的分类目录'
            },
            summary:{
                required:'请填写文章的摘要信息',
                maxlength:'摘要长度不得超过128个字符'
            },
            content:{
                required:'文章内容不能为空'
            }
        }
    });
    <#if editor == "0">
        var markdownEditor;
        markdownEditor = editormd('content-markdown',{
            width:"100%",
            height: initialEditorHeight,
            syncScrolling:'single',
            path:'${una}/ub-admin/plugin/editormd/lib/',
            codeFold:true,
            emoji:true,
            taskList:true,
            tocm:true,
            tex:true,
            watch:true,
            flowChart:true,
            sequenceDiagram:true,
            imageUpload:true,
            htmlDecode:'style,script,iframe|on*',
            imageFormats:['jpg','jpeg','gif','png','bmp','webp','svg'],
            imageUploadURL:'${una}/admin/upload/editormd',
            toolbarIcons:function(){
                return ["undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|",
                    "goto-line", "watch", "preview", "clear", "search", "|",
                    "help"];
            }
        });
        function initialEditorHeight(){
            var result = document.body.offsetHeight - 80;
            $("#setting-aside-card").height(result+79);
            return result;
        }
        window.onresize = function(){
            var h =  document.documentElement.clientHeight - 80;
            markdownEditor.height(h);
            $("#setting-aside-card").height(h+79);
        };
    <#else>
        var CKEditor;
        DecoupledDocumentEditor
            .create( document.querySelector( '.editor' ), {
                toolbar: {
                    items: [
                        'exportPdf',
                        '|',
                        'heading',
                        'undo',
                        'redo',
                        '|',
                        'fontSize',
                        'fontFamily',
                        '|',
                        'bold',
                        'italic',
                        'underline',
                        'strikethrough',
                        'highlight',
                        'fontColor',
                        '|',
                        'alignment',
                        '|',
                        'numberedList',
                        'bulletedList',
                        '|',
                        'indent',
                        'outdent',
                        '|',
                        'todoList',
                        'link',
                        'blockQuote',
                        'imageUpload',
                        'insertTable',
                        'mediaEmbed',
                        '|',
                        'codeBlock',
                        'code'
                    ]
                },
                language: 'zh-cn',
                image: {
                    toolbar: [
                        'imageTextAlternative',
                        'imageStyle:full',
                        'imageStyle:side'
                    ]
                },
                table: {
                    contentToolbar: [
                        'tableColumn',
                        'tableRow',
                        'mergeTableCells'
                    ]
                },
                licenseKey: '',
                mediaEmbed:{
                    providers:[
                        {
                            name:'unabootProvider',
                            url:[
                                /^player\.bilibili\.com.*/,
                                /^https:\/\/v\.qq\.com.*/,
                                /^player\.video\.iqiyi\.com.*/,
                                /^player\.youku\.com.*/,
                                /^.*/
                            ],
                            html: match=>{
                                console.log(match);
                                const input = match['input'];
                                return (
                                    '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 70%;">' +
                                    '<iframe src="https://'+input+'" ' +
                                    'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
                                    'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
                                    '</iframe>' +
                                    '</div>'
                                )
                            }
                        }
                    ]
                },
                ckfinder:{
                    uploadUrl:'${una}/admin/upload/ckeditor'
                }
            } )
            .then( editor => {
                CKEditor = editor;
                window.editor = editor;
                // Set a custom container for the toolbar.
                document.querySelector( '.document-editor__toolbar' ).appendChild( editor.ui.view.toolbar.element );
                document.querySelector( '.ck-toolbar' ).classList.add( 'ck-reset_all' );
            } )
            .catch( error => {
                console.error( error );
            } );

        initialCKEditorHeight();
        function initialCKEditorHeight(){
            scale();
        }
        window.onresize = function(){
            scale();
        };
        function scale(){
            var h = document.documentElement.clientHeight - 80;
            $("main .editor").height(h-245);
            $("#setting-aside-card").height(h+79);
        }
    </#if>
    $("input[id=taginput]").tagsinput({
        maxTags: 3,
        itemValue:'id',
        itemText:'name',
        typeahead:{
            source:function(){
                return $.get("${una}/admin/tags/?type=json");
            },
            afterSelect:function(){
                this.$element[0].value = ''
            }
        },
        freeInput:false
    });
    $("#upload-thumb").on("click",function(){
        layer.open({
            type:2,
            title:"<i class='fa fa-upload'> 上传封面</i>",
            shadeClose:false,
            shade:0.4,
            area:['450px','200px'],
            content:'${una}/admin/posts/thumb',
            resize:false,
            anim:2
        });
    });
    $("#undo-thumb").on("click",function(){
        var url = $("#thumb").val();
        if(url != null && url.trim() != ""){
            $.ajax({
                type:'POST',
                url:"${una}/admin/posts/thumb",
                data:{
                    url:url
                },
                success:function(){
                    $("#thumb-preview").attr("src","${una}/ub-admin/img/thumb.jpg");
                    $("#thumb").val("");
                    console.log(url+"已被移除");
                },
                error:function(){
                    console.log("remove thumbnail error.");
                }
            });
        }else{
            return false;
        }
    });
    $("button.submit").on("click",function(){
        var element = $(this);
        var status = element.attr("aria-status");
        $("input[id=status]").val(status);
        var tags = $("#taginput").val();
        $("input[id=tagIds]").val(tags);
        <#if editor == "1">
            $("#content").val(CKEditor.getData());
        </#if>
        var isOk = form.valid();
        if(isOk){
            var data = $("#post-form").serializeJSON();
            data = JSON.stringify(data);
            var load = layer.load(2,{shade:[0.4,'#f0f0f0']});
            $.ajax({
                type:'POST',
                url:'${una}/admin/posts/create',
                data:data,
                contentType:'application/json;charset=utf-8',
                success:function(){
                    layer.close(load);
                    layer.alert("当前操作已成功执行!",{
                        title:"<i class='fa fa-info'></i> 提示",
                        icon:1,
                        shade:[0.4,"#fff"],
                        shadeClose:false,
                        time:0,
                        btn:['OK'],
                        yes:function(index){
                            layer.close(index);
                            window.location.href="${una}/admin/posts/";
                        }
                    });
                },
                error:function(){
                    layer.close(load);
                    layer.alert("当前操作失败!请稍后再试。",{
                        title:"<i class='fa fa-info'></i> 提示",
                        icon:0,
                        shade:[0.4,"#fff"],
                        shadeClose:false,
                        time:0,
                        btn:['OK'],
                        yes:function(index){
                            layer.close(index);
                        }
                    });
                }
            });
        }else{
            return false;
        }
    });
</script>
</body>
</html>